<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { ViewData } from '@/api/types/userType'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { ref, unref, reactive } from 'vue'
import Edit from './components/Edit.vue'
import Detail from './components/Detail.vue'
import { useRouter } from 'vue-router'
import { useCache } from "@/hooks/web/useCache";
import { useAppStore } from "@/store/modules/app";
import api from '@/api'

defineOptions({
    name: 'schoolCategory'
})
const { getTestsDevice } = api
const { register, tableObject, methods } = useTable<ViewData>({
    getListApi: getTestsDevice,    
    response: {
        list: 'content',
        total: 'totalElements'
    }
})

const { getList, setSearchParams } = methods
const crudSchemas = reactive<CrudSchema[]>([
    {
        field: 'index',
        label: '序号',
        type: 'index',
        form: {
            show: false
        },
        detail: {
            show: false
        }
    },
    {
        field: 'member_no',
        label: '会员编号',
        search: { show: true },
        form: { colProps: { span: 24 } },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'name',
        label: '姓名',
        search: { show: true },
        form: { colProps: { span: 24 } },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'age',
        label: '年龄',
        search: { show: true },
        form: { colProps: { span: 24 },component:"InputNumber" },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'birth',
        label: '生日',
        form: { colProps: { span: 24 },component:"DatePicker",
         componentProps:{valueFormat:"YYYY-MM-DD"} },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'sex',
        label: '性别',
        form: {
            colProps: { span: 24 },
            component: 'Select',
            componentProps: {
                options: [
                    {
                        label: '男',
                        value: '男'
                    },
                    {
                        label: '女',
                        value: '女'
                    }
                ]
            }
        },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'action',
        width: '160px',
        label: '操作',
        form: { show: false },
        detail: { show: false }
    }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const pageLoad=()=>{
    const router = useRouter()
    const appStore = useAppStore();
    const { wsCache } = useCache();
    const token=router.currentRoute.value.query.token;    
    wsCache.set(appStore.getUserToken, token); 
    getList()
}
pageLoad();

const actionType = ref('')

const action = (row: ViewData, type: string) => {
    dialogTitle.value = type === 'edit' ? '编辑' : '详情'
    actionType.value = type
    tableObject.currentRow = row
    dialogVisible.value = true
}

const writeRef = ref<ComponentRef<typeof Edit>>()

const loading = ref(false)

const save = async () => {
    const write = unref(writeRef)
    await write?.elFormRef?.validate(async (isValid) => {
        if (isValid) {
            loading.value = true
            const data = (await write?.getFormData()) as ViewData
            let apiReques = data.id ? modifyTest : addTest

            const res = await apiReques(data)
                .catch(() => {})
                .finally(() => {
                    loading.value = false
                })
            if (res) {
                dialogVisible.value = false
                tableObject.currentPage = 1
                getList()
            }
        }
    })
}
</script>

<template>
    <ContentWrap>
        <Search
            :schema="allSchemas.searchSchema"
            @search="setSearchParams"
            @reset="setSearchParams"
        />

        <Table
            v-model:pageSize="tableObject.pageSize"
            v-model:currentPage="tableObject.currentPage"
            :columns="allSchemas.tableColumns"
            :data="tableObject.tableList"
            :loading="tableObject.loading"
            :pagination="{
                total: tableObject.total
            }"
            @register="register"
        >
            <template #action="{ row }">
                <ElButton type="primary" @click="action(row, 'viewReport')">查看报告</ElButton>
            <ElButton type="danger" @click="action(row, 'viewHistory')">查看历史评测</ElButton>
            </template>
        </Table>
    </ContentWrap>

    <Dialog v-model="dialogVisible" :title="dialogTitle" max-height="380px" width="500px">
        <Edit
            v-if="actionType !== 'detail'"
            ref="writeRef"
            :form-schema="allSchemas.formSchema"
            :current-row="tableObject.currentRow"
        />

        <Detail
            v-if="actionType === 'detail'"
            :detail-schema="allSchemas.detailSchema"
            :current-row="tableObject.currentRow"
        />

        <template #footer>
            <ElButton @click="dialogVisible = false">关闭</ElButton>
        </template>
    </Dialog>
</template>
